<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Monitoring Reports</title>
<script type="text/javascript" src="js/calendar.js"></script>
</head>
<body onload="populate_calendar(document.report_form);">
<div align="center"><h1>Select report creterias</h1></div>
<div align="center" style="width: 80%; margin-left: 20%;">
	<form action="show_reports.php" method="post" name="report_form" id="report_form" >
	<div id="site_area" style="width: 80%;">
		<div align="right" style="width: 20%;padding-right: 10%; float: left;"><label>Site:</label></div>
		<div align="left" style="width: 70%; ">
			<select id="site" name="site">
				<?php
					require_once 'config.php';
					require_once 'db.php';
					$link = connectdb($servername, $dbname, $dbusername, $dbpassword);
					$sql = "SELECT id, hostname FROM sites";
					$result = mysql_query($sql);
					if(!$result){
						echo mysql_error($link);
					}else{
						while($rows=mysql_fetch_array($result)){
							echo "<option value=\"" . $rows['id'] . ":" . $rows['hostname'] . "\">" . $rows['hostname'] . "</option>";
						}
					}
					close($link);
				?>
			</select>
		</div>
	</div>
	<div id="type_area" style="width: 80%; margin-top: 1%;">
		<div align="right" style="width: 20%;padding-right: 10%; float: left;"><label>Type:</label></div>
		<div align="left" style="width: 70%; ">
			<select id="type" name="type" onchange="change_type();">
				<option value=0>By Day</option>
				<option value=1>By Month</option>
				<!--<option value=2>By Year</option>-->
			</select>
		</div>
	</div>
	<div id="year_area" style="width: 80%;  margin-top: 1%;" >
		<div align="right" style="width: 20%; padding-right: 10%; float: left"><label for="year">Year: </label></div>
		<div align="left" style="width: 70%">
			<select id="year" name="year">
			</select>
		</div>
	</div>

	<div id="month_area" style="width: 80%;  margin-top: 1%;" >
		<div align="right" style="width: 20%; padding-right: 10%; float: left"><label for="month">Month: </label></div>
		<div align="left" style="width: 70%">
		<select id="month" name="month" onchange="populate_days(document.report_form);">
			<Option value=0>January</Option>
			<Option value=1>February</Option>
			<Option value=2>March</Option>
			<Option value=3>April</Option>
			<Option value=4>May</Option>
			<Option value=5>June</Option>
			<Option value=6>July</Option>
			<Option value=7>August</Option>
			<Option value=8>September</Option>
			<Option value=9>October</Option>
			<Option value=10>November</Option>
			<Option value=11>December</Option>
		</select>
		</div>
	</div>
	<div id="day_area" style="width: 80%; margin-top: 1%;" >
		<div align="right" style="width: 20%; padding-right: 10%; float: left"><label for="day">Day: </label></div>
		<div align="left" style="width: 70%"><select id="day" name="day"></select></div>
	</div>
	<!--<div id="graph_area" style="width: 80%; margin-top: 1%;" >
		<div align="right" style="width: 20%; padding-right: 10%; float: left"><label for="day">Graph type: </label></div>
		<div align="left" style="width: 70%">
		<select id="graph" name="graph">
			<option value="flash">Flash</option>
			<option value="image">Image</option>
		</select></div>
	</div>-->
	<div id="button_area"  align="left" style="width: 80%; margin-top: 1%; padding-left: 10%;">
		<input type="submit" id="submit" name="submit" value="Show report" style="margin-left: 20%;" />
	</div>
	</form>
	<div align="left" style="width: 80%;  padding-left: 30%; margin-top: 2%;"><a href="index.php">Back to Main Menu</a></div>
</div>
</body>
</html>
